<template>
  <sl-table :columns="columns" :data-source="data" row-key="productId">
    <template #bodyCell="{ record, column, index }">
      <div v-if="['price', 'returnsQuantity', 'discountAmount', 'returnsAmount'].includes(column.dataIndex as string)">
        <a-input-number v-model:value="record[column.dataIndex as string]" :min="-9999"></a-input-number>
      </div>
      <div v-else-if="column.key === 'oper'">
        <a class="text-color-danger" @click="$emit('remove', index)">删除</a>
      </div>
      <div v-else-if="column.dataIndex === 'reason'">
        <a-input v-model:value="record[column.dataIndex as string]" style="width: 100px"></a-input>
      </div>
      <WidthFitCell
        v-else
        :title="column.title"
        :value="record[column.dataIndex as string]"
        :custom-render="column.customRender"
      />
    </template>
    <template v-if="summaryData" #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
          <a-table-summary-cell>总计</a-table-summary-cell>
          <a-table-summary-cell :col-span="4"> </a-table-summary-cell>
          <a-table-summary-cell> {{ intlNumberFormat(summaryData.returnsQuantity) }} </a-table-summary-cell>
          <a-table-summary-cell> {{ intlNumberFormat(summaryData.price) }} </a-table-summary-cell>
          <a-table-summary-cell> {{ intlNumberFormat(summaryData.discountAmount) }} </a-table-summary-cell>
          <a-table-summary-cell> {{ intlNumberFormat(summaryData.returnsAmount) }} </a-table-summary-cell>
          <a-table-summary-cell :col-span="5"> </a-table-summary-cell>
        </a-table-summary-row>
      </a-table-summary>
    </template>
  </sl-table>
</template>
<script setup lang="ts">
import dayjs, { Dayjs } from "dayjs";
import { ProductFileItem, ReceiptItem } from "/@/api/main/pis/models";
import { ref, watch } from "vue";
import { Api } from "/@/api/main/pis";
import { SelectExpose } from "/@/types/components";
import { message, TableColumnProps } from "ant-design-vue";
import { ReceiptTableExpose } from "./useReceiptManage";
import { cloneDeep } from "lodash-es";
import { intlNumberFormat } from "/@/utils/common";
import { useReceiptTable } from "./useReceiptTable";

const props = defineProps<{
  data: Partial<ProductFileItem>[];
  summaryData?: Partial<ProductFileItem>;
  disableOper?: boolean;
}>();

const emits = defineEmits(["remove"]);

const columns = ref<TableColumnProps[]>([
  {
    title: "商品编码",
    dataIndex: "productCode",
  },
  {
    title: "商品条码",
    dataIndex: "barCode",
  },
  {
    title: "商品名称",
    dataIndex: "name",
  },
  {
    title: "计量单位",
    dataIndex: "measurementUnit",
  },
  {
    title: "规格",
    dataIndex: "specifications",
  },
  {
    title: "退货数量",
    dataIndex: "returnsQuantity",
  },
  {
    title: "单价",
    dataIndex: "price",
  },
  {
    title: "折让金额",
    dataIndex: "discountAmount",
  },
  {
    title: "退货金额",
    dataIndex: "returnsAmount",
  },
  // {
  //   title: "生产日期",
  //   dataIndex: "_productDate",
  // },
  {
    title: "生产日期",
    dataIndex: "productDate",
    customRender({ text }) {
      return text ? dayjs(text).format("YYYY-MM-DD") : "--";
    },
  },
  {
    title: "截止保质期",
    dataIndex: "shelfLife",
    customRender({ text }) {
      return text ? dayjs(text).format("YYYY-MM-DD") : "--";
    },
  },
  {
    title: "商品批次",
    dataIndex: "productBatch",
  },
  {
    title: "原因",
    dataIndex: "reason",
  },
]);
useReceiptTable({ props, columns });

defineExpose<ReceiptTableExpose>({
  getProductData() {
    const details = cloneDeep(props.data);
    for (let i = 0; i < details.length; i++) {
      const item = details[i];
      if (!item.returnsQuantity) {
        message.info("请输入各商品的退货数量");
        return null;
      }
    }
    return details;
  },
});
</script>
